<template>
  <!-- 参考 ViewUIPlus -->
    <transition name="fade">
        <div :class="classes" v-if="fullscreenVisible && show">
            <div :class="mainClasses">
                <!-- <span :class="dotClasses"></span> -->
                <a-icon name="loading" color="red" size="24"></a-icon>
                <span>测试测试</span>
                <div :class="textClasses"><slot></slot></div>
            </div>
        </div>
    </transition>
</template>
<script>
// import { oneOf } from '../../utils/assist'
// import ScrollbarMixins from '../modal/mixins-scrollbar'


const prefixCls = 'ivu-spin'

export default {
    name: 'Spin',
    // mixins: [ ScrollbarMixins ],
    props: {
        size: {
            type:String,
            default:'default'
        },
        fix: {
            type: Boolean,
            default: false
        },
        fullscreen: {
            type: Boolean,
            default: false
        },
        show: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            showText: false,
            // used for $Spin
            visible: false
        }
    },
    computed: {
        classes () {
            return [
                `${prefixCls}`,
                {
                    [`${prefixCls}-${this.size}`]: !!this.size,
                    [`${prefixCls}-fix`]: this.fix,
                    [`${prefixCls}-show-text`]: this.showText,
                    [`${prefixCls}-fullscreen`]: this.fullscreen
                }
            ]
        },
        mainClasses () {
            return `${prefixCls}-main`
        },
        dotClasses () {
            return `${prefixCls}-dot`
        },
        textClasses () {
            return `${prefixCls}-text`
        },
        fullscreenVisible () {
            if (this.fullscreen) {
                return this.visible
            } else {
                return true
            }
        }
    },
    watch: {
        visible (val) {
            if (val) {
                // this.addScrollEffect()
            } else {
                // this.removeScrollEffect()
            }
        }
    },
    mounted () {
        this.showText = !!this.$slots.default && this.$slots.default().some(item => item.children && item.children.length)
    }
}
</script>
